<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="operation-box">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="小区/楼宇/单元" v-bind="col">
          <a-cascader :options="cbuList" :disabled="id !== 0 ? true : false" placeholder="请选择小区/楼宇/单元" v-decorator="['bd_building_unit',{rules:[{required:true,message:'请选择小区/楼宇/单元'}],initialValue:[]}]" />
        </a-form-item>
        <a-form-item label="所在楼层" v-bind="col">
          <a-input placeholder="请输入所在楼层" v-decorator="['floor',{rules:[{required:true,message:'所在楼层不可为空'}],initialValue:''}]"/>
        </a-form-item>
        <a-form-item label="房号" v-bind="col">
          <a-input placeholder="房号" v-decorator="['name',{rules:[{required:true,message:'房号不可为空'},{pattern:'^[0-9]*-[0-9]*-[0-9]*$',message:'房号格式为:楼栋-单元-房间号'}],initialValue:''}]"/>
        </a-form-item>
        <a-form-item label="房屋户数" v-bind="col">
          <a-input placeholder="房屋户数" v-decorator="['num',{rules:[{required:true,message:'房屋户数'}],initialValue:''}]"/>
        </a-form-item>
        <a-form-item label="房屋建筑面积" v-bind="col">
          <a-input placeholder="请输入房屋建筑面积" addonAfter="平方米" v-decorator="['area',{rules:[{required:true,message:'房屋建筑面积不可为空'}],initialValue:''}]"/>
        </a-form-item>
        <a-form-item label="房屋套内面积" v-bind="col">
          <a-input placeholder="请输入房屋套内面积" addonAfter="平方米" v-decorator="['area_t',{rules:[{required:true,message:'房屋套内面积不可为空'}],initialValue:''}]"/>
        </a-form-item>
         <a-form-item label="公摊系数" v-bind="col">
          <a-input-number style="width:100%" placeholder="请输入房屋公摊系数" v-decorator="['ratio',{rules:[{required:true,message:'公摊费系统不能为空'}],initialValue:''}]"/>
        </a-form-item>
        <a-form-item label="是否交房" v-bind="col">
          <a-radio-group  :defaultValue="1" v-decorator="['over_house',{rules:[{required:true}],initialValue:''}]" >
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">是</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否收取公摊费" v-bind="col">
          <a-radio-group  :defaultValue="1" v-decorator="['is_gt',{rules:[{required:true}],initialValue:''}]" >
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">是</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="投票权数" v-bind="col" extra="可投票数/次">
          <a-input placeholder="请输入投票权数" v-decorator="['weights',{initialValue:1}]"/>
        </a-form-item>
        <a-form-item label="房屋类型" v-bind="col">
          <a-select placeholder="请选择房屋类型" v-decorator="['houses_type',{initialValue:undefined}]">
            <a-select-option v-for="(item,index) in houseTypeList" :key="index" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="房屋户型" v-bind="col">
          <a-input-group>
            <a-col :span="8">
              <a-form-item>
                <a-input addonAfter="室" v-decorator="['room_numbers',{initialValue:''}]" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item>
                <a-input addonAfter="厅" v-decorator="['hall_numbers',{initialValue:''}]" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item>
                <a-input addonAfter="卫" v-decorator="['guard_numbers',{initialValue:''}]" />
              </a-form-item>
            </a-col>
          </a-input-group>
        </a-form-item>
        <a-form-item :wrapperCol="{xs:{span:24,offset:0},sm:{span:24,offset:8}}">
          <a-button type="primary" html-type="submit">下一步</a-button>
          <a-button style="margin-left: 16px;" @click="() => { $router.go(-1) }">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-spin>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { mapGetters } from 'vuex'
  export default {
    name: 'data_houses_operation',
    data() {
      return {
        pageTitle:'添加房屋',
        cbuList:[], // 小区楼宇单元
        token:this.$ls.get(ACCESS_TOKEN), // 用户token
        houseTypeList:[{id:1,name:"住宅"},{id:2,name:"公寓"},{id:3,name:"办公"},{id:4,name:"厂房"},{id:5,name:"仓库"},{id:6,name:"商铺"},{id:7,name:"酒店"},{id:8,name:"别墅"},{id:9,name:"其它"}], // 房屋类型
        baseURL:this.axios.defaults.baseURL,
        spinning:false,
        form:this.$form.createForm(this),
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}}
        },
        id:'', // 房屋id
      }
    },
    async mounted() {
      let { id } = this.$route.params;
      this.id = id === 'add' ? 0 : Number(id);
      if(!isNaN(this.id)){
        await this.getCommunityBuildingUnit();
        if(this.id !== 0) {
          this.pageTitle = '编辑房屋';
          let { bd_building_unit,floor,name,num,is_gt,over_house,area,weights,houses_type,room_numbers,hall_numbers,guard_numbers,ratio } = await this.getInfo(id);
          this.form.setFieldsValue({bd_building_unit,ratio,num,is_gt,over_house,floor,name,area,weights,houses_type,room_numbers,hall_numbers,guard_numbers});
        }
      }else this.$router.go(-1);
    },
    methods:{
      // 获取房屋设置信息
      getInfo(id) {
        return new Promise((resolve,reject) => {
          this.axios({
            method:'post',
            url:'/houses/getHousesInfo',
            data:{id,token:this.token}
          }).then(res => {
            let { code,msg,data } = res;
            if(code === 0){
              Object.assign(data,{bd_building_unit:[data.bd_info_id,data.building_id,data.unit_id],houses_type:this.$common.isEmpty(data.houses_type) ? undefined : data.houses_type});
              resolve(data);
            }else this.$message.warning(msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          })
        })
      },
      // 提交信息
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (err) {
            for(let key in err){
              for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
            }
          }
          Object.assign(values,{token:this.token,id:this.id,houses_type:this.$common.isEmpty(values.houses_type) ? 9 : values.houses_type,send:'first'});
          this.spinning = true;
          this.axios({
            method:'post',
            url:'/houses/operation',
            data:values,
          }).then(res => {
            this.spinning = false;
            if(res.code == 0){
              this.$message.success('保存成功',1);
              this.$router.push({name:'data_houses_extend',params:{id:res.data}})
            }else this.$message.warning(res.msg);
          }).catch(() => {this.$message.error('服务器发生错误...',2),this.spinning = false;});
        });
      },
      // 获取小区楼宇单元
      getCommunityBuildingUnit() {
        return new Promise((resolve, reject) => {
          this.axios({
            method:'post',
            url:'/houses/getCommunityBuildingUnit',
            data:{token:this.token}
          }).then(res => {
            if(res.code === 0){
              this.cbuList = res.data;
              resolve();
            }else this.$message.warning(res.msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          })
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .operation-box{
    background: #ffffff;
    padding:25px;
    box-sizing: border-box;
  }
</style>